export const markdownTest1 = `**可以将 \`session\` 和 \`message\` 分开存储到不同的 Redux Slice，甚至不同的 IndexedDB 表，来简化数据结构**。但在分离时，需要 **合理管理数据依赖**，否则会出现 **不同步** 或 **状态不一致** 的问题。  

---

# **✅ 如何拆分 \`session\` 和 \`message\`**
## **🌟 方案：拆分为两个 Redux Slice**
- **\`sessionSlice\`**: 负责管理 **会话列表**（\`sessions\`）。
- **\`messageSlice\`**: 负责管理 **每个会话的消息**（\`messages\`）。

这样可以 **降低 Redux Store 的复杂度**，但需要确保 \`message\` 仍然能找到 \`session\`。

---

## **📝 1. 代码实现**
### **📌 \`sessionSlice.js\` (管理聊天会话)**
\`\`\`javascript
import { createSlice } from "@reduxjs/toolkit";

const initialState = {
  sessions: [], // 会话列表
  currentSessionId: null, // 当前选中的会话
};

const sessionSlice = createSlice({
  name: "session",
  initialState,
  reducers: {
    addSession(state, action) {
      const newSession = action.payload; // { id, topic, lastUpdate }
      state.sessions.push(newSession);
      state.currentSessionId = newSession.id; // 默认选中新会话
    },
    setCurrentSession(state, action) {
      state.currentSessionId = action.payload; // 切换会话
    },
  },
});

export const { addSession, setCurrentSession } = sessionSlice.actions;
export default sessionSlice.reducer;
\`\`\`
---

### **📌 \`messageSlice.js\` (管理聊天记录)**
\`\`\`javascript
import { createSlice } from "@reduxjs/toolkit";

const initialState = {
  messages: {}, // { sessionId1: [...], sessionId2: [...] }
};

const messageSlice = createSlice({
  name: "message",
  initialState,
  reducers: {
    addMessage(state, action) {
      const { sessionId, message } = action.payload;
      if (!state.messages[sessionId]) {
        state.messages[sessionId] = [];
      }
      state.messages[sessionId].push(message);
    },
    clearMessages(state, action) {
      const { sessionId } = action.payload;
      delete state.messages[sessionId];
    },
  },
});

export const { addMessage, clearMessages } = messageSlice.actions;
export default messageSlice.reducer;
\`\`\`
---

### **📌 \`store.js\` (合并 \`session\` 和 \`message\`)**
\`\`\`javascript
import { configureStore } from "@reduxjs/toolkit";
import sessionReducer from "./sessionSlice";
import messageReducer from "./messageSlice";

const store = configureStore({
  reducer: {
    session: sessionReducer,
    message: messageReducer,
  },
});

export default store;
\`\`\`

---

## **🛠 2. 数据存储优化**
### **🔹 IndexedDB 存储 \`session\` 和 \`message\`**
可以 **单独存储 \`session\` 和 \`message\`**，避免状态数据过于庞大：
\`\`\`javascript
import { openDB } from "idb";

const DB_NAME = "chatDB";
const SESSION_STORE = "sessions";
const MESSAGE_STORE = "messages";

// 初始化数据库
async function initDB() {
  return openDB(DB_NAME, 1, {
    upgrade(db) {
      if (!db.objectStoreNames.contains(SESSION_STORE)) {
        db.createObjectStore(SESSION_STORE, { keyPath: "id" });
      }
      if (!db.objectStoreNames.contains(MESSAGE_STORE)) {
        db.createObjectStore(MESSAGE_STORE, { keyPath: "sessionId" });
      }
    }
  });
}

// 存储 \`sessions\`
async function saveSession(session) {
  const db = await initDB();
  await db.put(SESSION_STORE, session);
}

// 存储 \`messages\`
async function saveMessages(sessionId, messages) {
  const db = await initDB();
  await db.put(MESSAGE_STORE, { sessionId, messages });
}

// 读取 \`sessions\`
async function getSessions() {
  const db = await initDB();
  return await db.getAll(SESSION_STORE);
}

// 读取 \`messages\`
async function getMessages(sessionId) {
  const db = await initDB();
  return await db.get(MESSAGE_STORE, sessionId);
}
\`\`\`
---

## **🎯 3. 为什么这样拆分？**
### **✅ 优势**
1. **更清晰的 Redux 结构**
   - \`sessionSlice\` 只管理会话，\`messageSlice\` 只管理消息，解耦。
2. **减少 Redux 状态大小**
   - \`session\` 数量少，适合存 Redux。
   - \`messages\` 可能很多，存 IndexedDB 更合理。
3. **更容易管理本地存储**
   - \`session\` 存 \`localStorage\` 或 IndexedDB 的 \`sessions\` 表。
   - \`message\` 存 IndexedDB 的 \`messages\` 表，避免 Redux 状态膨胀。

### **⚠️ 可能的 Bug**
- **会话和消息不同步**
  - 需要确保 **删除会话时，也删除该会话的消息**：
    \`\`\`javascript
    store.dispatch(clearMessages({ sessionId }));
    \`\`\`
- **切换会话后消息不显示**
  - 确保 UI 组件监听 \`currentSessionId\` 变化，并从 IndexedDB 读取对应 \`messages\`：
    \`\`\`javascript
    useEffect(() => {
      if (currentSessionId) {
        getMessages(currentSessionId).then(setMessages);
      }
    }, [currentSessionId]);
    \`\`\`

---

## **🚀 结论**
✅ **拆分 \`session\` 和 \`message\` 是可行的，并且是更好的做法！**  
- \`session\` 存 Redux，管理会话列表  
- \`message\` 存 IndexedDB，避免 Redux 变大  
- Redux + IndexedDB 结合，**减少性能消耗**，**避免数据丢失**  

这样你的 **AI 聊天系统** 在 **多会话管理、消息存储、性能优化** 方面都更合理！ 🚀`

export const markdownTest2 = `# Markdown语法测试文档

这是一个用于测试各种Markdown语法渲染效果的文档。

## 标题测试

### 三级标题
#### 四级标题
##### 五级标题
###### 六级标题

## 文本格式

这是**粗体文本**，这是*斜体文本*，这是***粗斜体文本***。

这是~~删除线文本~~。

这是\`行内代码\`。

## 列表

### 无序列表
- 列表项目一
- 列表项目二
  - 嵌套列表项一
  - 嵌套列表项二
- 列表项目三

### 有序列表
1. 第一项
2. 第二项
   1. 子项目A
   2. 子项目B
3. 第三项

## 链接和图片

这是一个[示例链接](https://www.example.com)。

这是一个参考式链接：[Google][1]

[1]: https://www.google.com

## 引用

> 这是一个引用块。
> 
> 引用可以包含多个段落。
> 
> > 这是嵌套引用。

## 代码块

\`\`\`python
def hello_world():
    """这是一个Python代码示例"""
    print("Hello, World!")
    return True

# 调用函数
result = hello_world()
\`\`\`

\`\`\`javascript
// JavaScript代码示例
function greet(name) {
    return \`Hello, ${name}!\`;
}

console.log(greet("World"));
\`\`\`

## 表格

| 姓名 | 年龄 | 职业 |
|------|------|------|
| 张三 | 25   | 工程师 |
| 李四 | 30   | 设计师 |
| 王五 | 28   | 产品经理 |

## 分割线

---

## 任务列表

- [x] 已完成的任务
- [x] 另一个已完成的任务
- [ ] 未完成的任务
- [ ] 另一个未完成的任务

## 特殊字符转义

使用反斜杠转义特殊字符：\*这不是斜体\*

## HTML标签（如果支持）

<details>
<summary>点击展开详情</summary>

这是隐藏的内容，点击上方可以展开或收起。

</details>

## 数学公式（如果支持LaTeX）

内联公式：$E = mc^2$

块级公式：
$$
\\sum_{i=1}^{n} x_i = x_1 + x_2 + \\cdots + x_n
$$

## 脚注（如果支持）

这是一个包含脚注的句子[^1]。

[^1]: 这是脚注的内容。

## 总结

这个文档包含了大部分常用的Markdown语法元素，可以用来测试Markdown渲染器的兼容性和效果。不同的渲染器可能对某些语法的支持程度不同，特别是表格、任务列表、数学公式等扩展语法。`

export const markdownTest3 = `
> Render as markdown content to show rich text!

Link: [Ant Design X](https://x.ant.design)
`.trim()
export const markdownTest4 = `# 标题组件 我将创建一个美观、响应式的标题组件，具有多种样式选项和交互效果。这个组件将使用原生HTML、CSS和JavaScript实现。 ## 设计思路 - 创建多种标题样式：主标题、副标题、带下划线、带背景色等 - 添加简单的动画效果和交互功能 - 使用CSS变量实现主题一致性 - 确保组件在移动设备上良好显示 下面是完整的HTML代码： \`\`\`html <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>标题组件</title> <style> :root { --primary-color: #4a6cf7; --secondary-color: #6c757d; --success-color: #28a745; --warning-color: #ffc107; --danger-color: #dc3545; --light-color: #f8f9fa; --dark-color: #343a40; --shadow: 0 4px 6px rgba(0, 0, 0, 0.1); --transition: all 0.3s ease; } * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; } body { background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); min-height: 100vh; padding: 40px 20px; display: flex; flex-direction: column; align-items: center; } .container { max-width: 1000px; width: 100%; margin: 0 auto; } .section { background-color: white; border-radius: 12px; box-shadow: var(--shadow); padding: 30px; margin-bottom: 30px; transition: var(--transition); } .section:hover { transform: translateY(-3px); box-shadow: 0 8px 15px rgba(0, 0, 0, 0.1); } .section-title { color: var(--dark-color); margin-bottom: 20px; font-size: 1.5rem; font-weight: 600; border-left: 4px solid var(--primary-color); padding-left: 15px; } /* 基础标题样式 */ .heading-basic { color: var(--dark-color); margin: 15px 0; transition: var(--transition); } .heading-basic:hover { color: var(--primary-color); } .h1 { font-size: 2.5rem; font-weight: 700; } .h2 { font-size: 2rem; font-weight: 600; } .h3 { font-size: 1.75rem; font-weight: 600; } .h4 { font-size: 1.5rem; font-weight: 500; } .h5 { font-size: 1.25rem; font-weight: 500; } .h6 { font-size: 1rem; font-weight: 500; } /* 带下划线的标题 */ .heading-underline { position: relative; padding-bottom: 10px; margin-bottom: 20px; } .heading-underline::after { content: ''; position: absolute; bottom: 0; left: 0; width: 60px; height: 3px; background-color: var(--primary-color); transition: var(--transition); } .heading-underline:hover::after { width: 100%; } /* 带背景色的标题 */ .heading-bg { display: inline-block; padding: 10px 20px; background-color: var(--primary-color); color: white; border-radius: 6px; } .heading-bg.warning { background-color: var(--warning-color); color: var(--dark-color); } .heading-bg.success { background-color: var(--success-color); } .heading-bg.danger { background-color: var(--danger-color); } /* 带图标的标题 */ .heading-icon { display: flex; align-items: center; gap: 10px; } .icon { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: var(--primary-color); color: white; font-weight: bold; } /* 渐变标题 */ .heading-gradient { background: linear-gradient(90deg, var(--primary-color), var(--success-color)); -webkit-background-clip: text; background-clip: text; color: transparent; display: inline-block; } /* 动画标题 */ .heading-animated { position: relative; overflow: hidden; } .heading-animated::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent); transition: var(--transition); } .heading-animated:hover::before { left: 100%; } /* 可编辑标题 */ .heading-editable { cursor: pointer; border-bottom: 1px dashed #ccc; padding: 5px; transition: var(--transition); } .heading-editable:hover { background-color: #f0f0f0; border-radius: 4px; } .heading-editable:focus { outline: none; background-color: #f8f9fa; border-bottom: 1px solid var(--primary-color); } /* 控制面板 */ .controls { background-color: white; border-radius: 12px; box-shadow: var(--shadow); padding: 25px; margin-bottom: 30px; display: flex; flex-wrap: wrap; gap: 15px; align-items: center; } .control-group { display: flex; align-items: center; gap: 10px; } label { font-weight: 500; color: var(--dark-color); } select, input { padding: 8px 12px; border: 1px solid #ddd; border-radius: 4px; font-size: 0.9rem; } button { padding: 8px 15px; background-color: var(--primary-color); color: white; border: none; border-radius: 4px; cursor: pointer; transition: var(--transition); } button:hover { background-color: #3a5ce5; } /* 响应式设计 */ @media (max-width: 768px) { .h1 { font-size: 2rem; } .h2 { font-size: 1.75rem; } .h3 { font-size: 1.5rem; } .controls { flex-direction: column; align-items: flex-start; } } </style> </head> <body> <div class="container"> <div class="section"> <h2 class="section-title">标题组件演示</h2> <p>这是一个展示多种标题样式的组件。您可以使用下面的控制面板自定义标题。</p> </div> <div class="controls"> <div class="control-group"> <label for="headingType">标题类型:</label> <select id="headingType"> <option value="h1">H1 - 主标题</option> <option value="h2">H2 - 二级标题</option> <option value="h3">H3 - 三级标题</option> <option value="h4">H4 - 四级标题</option> <option value="h5">H5 - 五级标题</option> <option value="h6">H6 - 六级标题</option> </select> </div> <div class="control-group"> <label for="headingStyle">标题样式:</label> <select id="headingStyle"> <option value="basic">基础样式</option> <option value="underline">带下划线</option> <option value="bg">带背景色</option> <option value="icon">带图标</option> <option value="gradient">渐变效果</option> <option value="animated">动画效果</option> <option value="editable">可编辑</option> </select> </div> <div class="control-group"> <label for="headingText">标题文本:</label> <input type="text" id="headingText" value="这是一个漂亮的标题"> </div> <button id="updateBtn">更新标题</button> </div> <div class="section"> <h2 class="section-title">标题预览</h2> <div id="headingPreview"> <h1 class="heading-basic h1">这是一个漂亮的标题</h1> </div> </div> <div class="section"> <h2 class="section-title">标题样式示例</h2> <div class="heading-basic h1">H1 - 主标题</div> <div class="heading-basic h2">H2 - 二级标题</div> <div class="heading-basic h3">H3 - 三级标题</div> <div class="heading-basic h4">H4 - 四级标题</div> <div class="heading-basic h5">H5 - 五级标题</div> <div class="heading-basic h6">H6 - 六级标题</div> <br> <div class="heading-underline h2">带下划线的标题</div> <br> <div class="heading-bg h3">带背景色的标题</div> <div class="heading-bg warning h3">警告样式标题</div> <div class="heading-bg success h3">成功样式标题</div> <div class="heading-bg danger h3">危险样式标题</div> <br> <div class="heading-icon h3"> <span class="icon">!</span> <span>带图标的标题</span> </div> <br> <div class="heading-gradient h2">渐变效果标题</div> <br> <div class="heading-animated h2">动画效果标题</div> <br> <div class="heading-editable h3" contenteditable="true">可编辑标题 - 点击编辑</div> </div> </div> <script> // 获取DOM元素 const headingType = document.getElementById('headingType'); const headingStyle = document.getElementById('headingStyle'); const headingText = document.getElementById('headingText'); const updateBtn = document.getElementById('updateBtn'); const headingPreview = document.getElementById('headingPreview'); // 更新标题预览 function updateHeadingPreview() { const type = headingType.value; const style = headingStyle.value; const text = headingText.value || '这是一个漂亮的标题'; // 创建新标题元素 const newHeading = document.createElement('div'); newHeading.textContent = text; // 设置标题类型类 newHeading.className = \`heading-basic \${type}\`; // 根据选择的样式添加相应类 if (style === 'underline') { newHeading.classList.add('heading-underline'); } else if (style === 'bg') { newHeading.classList.add('heading-bg'); } else if (style === 'icon') { newHeading.classList.add('heading-icon'); newHeading.innerHTML = \`<span class="icon">!</span><span>\${text}</span>\`; } else if (style === 'gradient') { newHeading.classList.add('heading-gradient'); } else if (style === 'animated') { newHeading.classList.add('heading-animated'); } else if (style === 'editable') { newHeading.classList.add('heading-editable'); newHeading.setAttribute('contenteditable', 'true'); } // 更新预览区域 headingPreview.innerHTML = ''; headingPreview.appendChild(newHeading); } // 初始化 updateHeadingPreview(); // 添加事件监听器 updateBtn.addEventListener('click', updateHeadingPreview); // 当输入框内容变化时实时更新（可选） headingText.addEventListener('input', updateHeadingPreview); // 为所有可编辑标题添加保存功能 document.addEventListener('DOMContentLoaded', function() { const editableHeadings = document.querySelectorAll('.heading-editable'); editableHeadings.forEach(heading => { heading.addEventListener('blur', function() { // 在实际应用中，这里可以添加保存逻辑 console.log('标题已更新为:', this.textContent); }); }); }); </script> </body> </html> \`\`\` ## 功能说明 这个标题组件具有以下特点： 1. **多种标题类型**： - H1到H6六级标题 - 每种标题有适当的字体大小和粗细 2. **多种样式选项**： - 基础样式：简洁的标题样式 - 带下划线：标题下方有动态下划线 - 带背景色：多种颜色背景的标题 - 带图标：标题前带有圆形图标 - 渐变效果：文字颜色渐变 - 动画效果：鼠标悬停时有流光效果 - 可编辑：用户可以点击编辑标题内容 3. **交互功能**： - 控制面板可以自定义标题类型、样式和文本 - 可编辑标题支持实时编辑 - 所有标题在悬停时有视觉反馈 4. **响应式设计**： - 在移动设备上自动调整布局和字体大小 您可以直接复制上面的代码到HTML文件中，在浏览器中打开即可使用这个标题组件。`

export const markdownTest5 = '# 标题测试 \n ## 我是副标题'

export const prompt =
  '请帮我生成一个类似于html的h1标签的标题组件，代码越少越好，如果超过100行，就打断你的腿'
